<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片直播</title>
    <link rel="stylesheet" href="assets/css/preview.css">
    <link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
</head>
<body>
    <div class="preview-container">
        <div class="banner">
            <img src="assets/images/banner.jpg" alt="城乡手牵手，助乡村振兴（阿杜走乡村，邀您共享年猪宴）">
        </div>
        <h5 class="banner-title">城乡手牵手，助乡村振兴（阿杜走乡村，邀您共享年猪宴）</h5>
        
        <div class="info-bar">
            <div class="stats">
                <span class="image-count">0 张照片</span>
                <span class="dot">·</span>
                <span class="view-count">0 次浏览</span>
            </div>
            <div class="meta">
                <span class="date">2024年12月15日</span>
                <span class="dot">·</span>
                <span class="location">雅安·芦山</span>
            </div>
        </div>

        <div class="gallery" id="imageGallery"></div>
        <div class="loading-more" id="loadingMore">加载中...</div>
        <div class="end-message" id="endMessage">已经到底啦~</div>
    </div>

    <!-- 图片预览弹窗 -->
    <div class="preview-modal" id="previewModal">
        <div class="swiper">
            <div class="swiper-wrapper"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="close-btn">&times;</div>
    </div>

    <script src="assets/js/swiper-bundle.min.js"></script>
    <script src="assets/js/preview.js"></script>
</body>
</html> 